ASP NET - Server Controls - Controles HTML do Servidor

Acionando o alterando os itens exibidos na aba padrão

Todos sabemos que Visual Studio temos uma 'Caixa de Ferramentas' que contém uma coleção de controles que podemos usar em nosso trabalho clicando no controle e arrastando para a página do nosso projeto. Muito prático e produtivo.

Contudo essa 'coleção de controles' da 'Caixa de Ferramentas' é personalizada pelos controles que podemos ou não utilizar. Por exemplo, a coleção de controles é diferente se nosso projeto é um projeto 'Windows Forms' ( Aplicação Windows ) ou 'aplicações web' ( Aplicação Web ). Mesmo dentro de um mesmo projeto podemos ter diferentes conjuntos de 'controles' dependendo da página que estamos trabalhando. Se é uma página HTML somente a aba 'HTML' estará disponível porque, lógicamente, só podemos usar controles HTML numa página HTML.

Já se você está editando uma página ASP NET terá acesso a todos os controles ASP NET e visualizará as abas que dão acesso a esses controles e aos que podem ser utilizados no documento que está sendo editado. As abras num doc ASP NET são : Padrão, Dados, Validação, Navegação, Logon, Web Parts, Extensões Ajax, Dados dinâmicos, HTML e Geral.

Na aba 'HTML' dessa 'Caixa de Ferramentas' estão os controles feitos puramente com HTML ( Não usam ASP NET ) e que podemos usar e que se destinam a serem processados pelo servidor como, por exemplo, um submit num form que contenha uma caixa simples de texto (TextBox). Note que eles jamais terão o parâmetro 'RunAt=Server' porque não são controles ASP NET.

Além desses controles podemos adicionar controles simplesmente clicando com o botão direito do mouse na guia ( por exemplo, Padrão ) e selecionar 'Escolher itens' e ai o Visual Studio varre um monte de dlls do .NET Framework ( acredito que do sistema windows inteiro - métodos públicos) e exibe uma tela com o que pode ser adicionado.

Note que 'todos' os controles são exibidos mesmos aqueles que não são feitos para serem utilizados no documento que está sendo editado no momento. Você verá que se isso ocorrer, o elemento ser impróprio para o documento, o item não estará disponível e não conseguiremos clicar nele na 'Caixa de Ferramentas'.

A maioria dos controles tem o funcionamento especificado para diferentes utilizações por diferentes plataformas, ou seja, um TextBox (HTML) é diferente de um TextBox runat=server ( ASP NET ) porque o tratamento de seus eventos e funcionalidades são feitos por plataformas diferentes.
Ao colocar runat=server num controle você está informando que deseja que o servidor e o ASP NET faça o tratamento dele e não apenas o html puro dando um leque de utilidade muito grande a um controle relativamente simples. Resumindo, com o runat=server o ASP NET 'enxerga' o controle como sendo dele, não do html.
Sendo assim um TextBox serve para windows forms, aplicações web, mobile só que são ligeiramente diferentes porque seus eventos são tratados por mecanismos diferentes, por exemplo.

O segredo do ASP NET é saber como utilizar corretamente cada controle por isso a primeira tarefa de uma pessoa que pretende ser desenvolvedor ASP NET é aprender os controles e suas funcionalidades.
Muitas vezes analistas perdem tempo tentando fazer uma funcionalidade que o controle não tem quando deveriam utilizar outro controle para a tarefa ou utilizar o controle de maneira diferente ou com outra associação e com isto evitariam muita dor de cabeça. Digamos que seria o uso impróprio do componente, não perca tempo, procure pelo correto e sempre fique no ASP NET. Ir para o JavaScript para contornar uma limitação sempre resulta em dor de cabeça e baixa produtividade.Seja produtivo que isso agrega valor ao seu salário.

Muitos controles por serem complexos tem muitos parâmetros ou formatações acabam sendo difíceis de configurar, a gente perde horas procurando pelo parâmetro correto. Por exemplo, o controle Calendar se você quiser navegar muitos anos fica muito lerdo clicar em mês seguinte ou anterior.

Controles ASP NET da aba Padrão do Visual Studio

Controle : Ad Rotator
Código : <asp:AdRotator ID="AdRotator1" runat="server" />
Como é enviado ao Cliente : <a id="AdRotator1" target="_top"><img /></a>
Incluir Item : Não
Utilidade do controle : AD rotator em inglês significa 'Rodizio de propaganda(Ad)'.
Exibe imagens de propaganda. Cada vez que a página é carregada uma das imagens associadas a este controle é exibida, aleatoriamente.
Exemplo: Ad Rotator
Controle : Bullet List
Código : <asp:BulletedList ID="BulletedList1" runat="server">
    <asp:ListItem Text="Item1"></asp:ListItem>
</asp:BulletedList>
Como é enviado ao Cliente : <ul id="BulletedList1">
      <li>Item1</li>
</ul>
Incluir Item : Sim
Utilidade do controle : Exibe uma lista de itens normalmente vinda de um banco de dados com uma bolinha à esquerda ao estilo do Word.
Exemplo: Bullet List(ASP NET Ordered List)
Controle : Button
Código : <asp:Button type="reset" ID="Button1" runat="server" Text="Botão de reset" />
Como é enviado ao Cliente : <input type="reset" id="Button1" name="Button1" value="Botão de reset" />
Incluir Item : Não
Utilidade do controle : O controle button é utilizado para indicar que o usuário terminou um processo ( como preencher dados) e deseja ativar uma tarefa no browser. Ao ser clicar ele dispara um evento tipo 'onClick' mas dependendo do tipo do botão ele pode fazer coisas diferentes.
Um exemplo é quando o usuário terminou de digitar informações em diversos textboxes da página ( como um cadastro) e deseja enviar as informações ao servidor ( os controles textbox devem estar dentro de um form ). Para isto existe o botão tipo submit
Outro exemplo é se o usuário digitou um monte de texto nos textboxes e deseja limpar o conteúdo de todos de uma vez. Para isto usamos o botão tipo reset. Ele limpa os dados do formulário para seus defaults ou valores que havia quando a página foi carregada.
Fora do ASP NET (HTML), outra utilização do botão é associar seu evento 'onclick' a um código javascript. Dentro do Javascript podemos ter funções de apoio ao usuário como avisar que ele esqueceu de preencher um campo ou de crítica como uma opção inválida ou que não condiz com o contexto das opções escolhidas pelo usuário. Outra funcionalidade importante do javascript é evitar de enviar dados ao servidor e este recusar por causa de um erro. Podemos colocar a crítica no javascript e isso evitaria que a solicitação fosse feita ao servidor, o processo ficaria todo no cliente apenas.
Exemplo: Digite algo na caixa à esquerda e pressione o botão de reset.
Controle : Calendar
Código : <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
Como é enviado ao Cliente : Table - Vide texto no inicio da página
Incluir Item : Não
Utilidade do controle : Exibe um calendário para que o usuário selecione uma data. Podemos personalizar o controle para selecionar dia ou mês ou ano ou mesmo encadear eles para que cada um selecione um item.
Exemplo: Exemplo Calendário
Controle : CheckBox
Código : <asp:CheckBox ID="CheckBox1" runat="server" />
Como é enviado ao Cliente : <input id="CheckBox1" type="checkbox" name="CheckBox1" /> Clique em mim.
Incluir Item : Não
Utilidade do controle : O checkbox é um item que pode ser clicado pelo usuário indicando a seleção de um elemento de uma coleção de itens. Ao contrário do CheckBox para ser 'desclicado' automaticamente ao selecionarmos outro item da lista é preciso fazer um código em javascript para isso ou precisam ser associados em grupo onde apenas um poderá ser clicado. Podemos agrupar os itens (através do parâmetro name da tag ou group-item no asp net) de um grupo de checkboxes e com isto só será possível selecionar apenas um desses itens de cada vez.
Exemplo :  Clique em mim, no quadrado1.
 Clique em mim, no quadrado2.
Controle : CheckBoxList
Código : <asp:CheckBoxList ID="CheckBoxList1" runat="server">
   <asp:ListItem>Item1</asp:ListItem>
</asp:CheckBoxList>
Como é enviado ao Cliente : <table id="CheckBoxList1">
    <tr>
        <td>
                <input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" value="Item1" />
                <label for="CheckBoxList1_0">Item1</label>
        </td>
    </tr>
</table>
Incluir Item : Sim
Utilidade do controle : É uma lista de checkboxes. O checkbox é o item logo acima deste.
Controle : FileUpload
Código : <asp:FileUpload ID="FileUpload1" runat="server" />
Como é enviado ao Cliente : <input type="file" name="FileUpload1" id="FileUpload1" />
Incluir Item : Não
Utilidade do controle : Permite enviar arquivos ao servidor. Contudo, por motivos de segurança, restringimos aos tipos de arquivo absolutamente necessários como documentos pdf, word, excel mas mesmo assim há risco de envio de vírus ao servidor.
Para que este controle funcione é preciso dar ao usuário IISUSR do servidor web a permissão de escrita na pasta do upload do arquivo. Apenas nesta pasta o usuário IISUSR poderá enviar os arquivos e isto só poderá ser feito pelo controle FileUpload do ASP NET ( ou HTML ).
Exemplo de uso: Clique aqui para ver um Exemplo do Upload de Arquivos
Controle : HiddenField
Código : <asp:HiddenField ID="HiddenField1" runat="server" />
Como é enviado ao Cliente : <input type="hidden" name="HiddenField1" id="HiddenField1" />
Incluir Item : Não
Utilidade do controle : Traduzindo do Inglês ficaria 'Campo Escondido' e esta é exatamente a finalidade dele, enviar informações que não serão exibidas ao usuário. Aí você pergunta, qual a finalidade ? Este controle permite enviar dados dentro dele e, ao dar um submit/postback na página poderemos recuperar esses valores futuramente. Útil para informações com baixo sigilo.
Este campo pode ser criptografado pelo ViewState mas pode ser facilmente recuperado pelos controles dentro da página.
Exemplo de uso: Clique aqui para ver um Exemplo de HiddenField
Controle : HyperLink
Código : <asp:HyperLink ID="HyperLink1" runat="server">HyperLink</asp:HyperLink>
Como é enviado ao Cliente : <a id="HyperLink1">HyperLink</a>
Incluir Item : Não
Utilidade do controle : É a velha tag anchor HTML que ao ser clicada nos envia para um destino podendo ser na mesma página, numa página externa mas no mesmo servidor ou mesmo numa página de um servidor externo.
Controle : Image
Código : <asp:Image ID="Image1" runat="server" />
Como é enviado ao Cliente : <img id="Image1" />
Incluir Item : Não
Utilidade do controle : Exibe uma imagem. na página.
Dentro de todos elementos HTML a imagem é a tag com melhor visual e isto faz com que a maioria dos sites bonitos tenham imagens como seu principal conteúdo.
Note que a imagem é um arquivo externo a página HTML ou ASP NET e, bem como no html, podemos incorporar funcionalidades como link entre outros a ela
Exemplo de uso: Clique aqui para ver uma bela Imagem
Controle : ImageButton
Código : <asp:ImageButton ID="ImageButton1" runat="server" />
Como é enviado ao Cliente : <input type="image" name="ImageButton1" id="ImageButton1" />
Incluir Item : Não
Utilidade do controle : Exibe uma imagem que atua como um link, ou seja, quando clicarmos na imagem seremos enviados para onde o link associado a imagem apontar. Mais utilizado no asp net para disparar eventos server-side.
Exemplo de uso: Clique aqui para ver um exemplo
Controle : ImageMap
Código : <asp:ImageMap ID="ImageMap1" runat="server"></asp:ImageMap>
Como é enviado ao Cliente : <img id="ImageMap1" />
Incluir Item : Não
Utilidade do controle : Exibe uma imagem e ao clicar em certas partes da imagem será executado um processo como se clicasse num link, dependendo da parte da imagem clicada.
Controle : Label
Código : <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
Como é enviado ao Cliente : <span id="Label1">Label</span>
Incluir Item : Não
Utilidade do controle : Exibe uma mensagem indicando finalidade ou o que está sendo exibido num campo adjacente.
Controle : LinkButton
Código : <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
Como é enviado ao Cliente : <a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')">LinkButton</a>
Incluir Item : Não
Utilidade do controle : Exibe um botão que ao ser clicado atua como um link comum.
Controle : ListBox
Código : <asp:ListBox ID="ListBox1" runat="server"></asp:ListBox>
Como é enviado ao Cliente : <select size="4" name="ListBox1" id="ListBox1">
Incluir Item : Não
Utilidade do controle : Lista um conjunto de itens para que o usuário visualize suas informações
Controle : Literal
Código : <asp:Literal ID="Literal1" runat="server"></asp:Literal>
Como é enviado ao Cliente : Esta tag não é enviada ao servidor como a mesma ou outra tag.
Somente o conteúdo dentro da tag é enviado. Pode ser um simples texto ou um elemento HTML.
Incluir Item : Não
Utilidade do controle : É um controle ASP NET mas nenhum controle é gerado a partir dele.
Controle : Localize
Código : <asp:Localize ID="Localize1" runat="server"></asp:Localize>
Como é enviado ao Cliente : Este controle ASP NET não gera outro controle.
Incluir Item : Não
Utilidade do controle : É um controle ASP NET mas nenhum controle é gerado a partir dele.
Esta tag apenas reserva um local dentro do documento corrente para exibição de um texto.
Controle : MultiView
Código : <asp:Panel ID="Page1ViewPanel" runat="Server">
    <asp:MultiView ID="DevPollMultiView" ActiveViewIndex="0" runat="Server">
        <asp:View ID="Page1" runat="Server"></asp:View>
        <asp:View ID="Page2" runat="Server"></asp:View>
        <asp:View ID="Page3" runat="Server"></asp:View>
        <asp:View ID="Page4" runat="Server"></asp:View>
    </asp:MultiView>
</asp:Panel>
Como é enviado ao Cliente : O Servidor WEB ASP NET processa o conteúdo e apenas o que está dentro de asp:View é enviado ao cliente, um asp:View de cada vez.
Portanto, este controle não gera outro controle mas sim processo no servidor web.
Incluir Item : Sim
Utilidade do controle : É um controle ASP NET mas nenhum controle é gerado a partir dele.
Com este controle podemos fazer uma pesquisa com multiplas perguntas.
Parecido com Wizard.
Controle : Panel
Código : <asp:Panel ID="Panel1" runat="server"></asp:Panel>
Como é enviado ao Cliente : <div id="Panel1"></div>
Incluir Item : Não
Utilidade do controle : Este elemento é um container de elementos. Veja o controle MultView logo acima que é implementado com este controle.
Controle : PlaceHolder
Código : <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
Como é enviado ao Cliente : Este controle não gera outro controle.
Incluir Item : Sim
Utilidade do controle : Este controle apenas agrega outros controles dentro de sí de maneira que podemos exibir, selecionar ou esconder esses controles conforme desejar-mos, sempre em conjunto, nunca isoladamente.
Controle : RadioButton
Código : Se não agrupado:
<asp:RadioButton ID="RadioButton1" runat="server" />
Se agrupado :
<input id="RadioButton1" type="radio" name="x" value="RadioButton1" />
Como é enviado ao Cliente : Se não agrupado:
<input id="RadioButton1" type="radio" name="RadioButton1" value="RadioButton1" />
Se agrupado :
<input id="RadioButton1" type="radio" name="x" value="RadioButton1" />
Incluir Item : Não
Utilidade do controle : Um radio button pode ser clicado mas nunca desclicado.
Através da tag GroupName="x" podemos associar os botões e com isto ao clicar num botão se houver outro botão selecionado ele será simplesmente desclicado. Permite fazer uma seleção de apenas um dos itens da coleção de botões.
Controle : RadioButtonList
Código : <asp:RadioButtonList ID="RadioButtonList1" runat="server">
     <asp:ListItem>Item1</asp:ListItem>
</asp:RadioButtonList>
Como é enviado ao Cliente : <table id="RadioButtonList1">
    <tr>
        <td>
            <input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="Item1" />
            <label for="RadioButtonList1_0">Item1</label>
        </td>
    </tr>
</table>
Incluir Item : Sim
Utilidade do controle : Este controle é um container de Radio buttons. Todos os itens da lista são convertidas em radio buttons.
Controle : Substitution
Código : <asp:Substitution ID="Substitution1" runat="server" />
Como é enviado ao Cliente : Este controle não gera outro controle.
Incluir Item : Não
Utilidade do controle : Este controle é um container de outros elementos da página que não deverão ser trazidos do cache obrigatóriamente.
Controle : Table
Código : <asp:Table ID="Table1" runat="server"></asp:Table>
Como é enviado ao Cliente : <table id="Table1"></table>
Incluir Item : Não
Utilidade do controle : Exibe os elementos em linhas e colunas como uma planilha Excel.
Este item está dentro de uma tabela.
Controle : TextBox
Código : asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
Como é enviado ao Cliente : <input name="TextBox1" type="text" id="TextBox1" />
Incluir Item : Não
Utilidade do controle : Exibe uma caixa de texto para que o usuário preencha digitando algo.
Controle : View
Código : <asp:View ID="View1" runat="server"></asp:View>
Como é enviado ao Cliente : Este controle não gera outro controle.
Incluir Item : Não
Utilidade do controle : Este controle é um mero container de outros controles. Trabalha em conjunto com o controle Multiview, Panel.
Controle : Wizard
Código : <asp:Wizard ID="Wizard1" runat="server">
     <WizardSteps>
          <asp:WizardStep ID="WizardStep1" runat="server" Title="Step 1"></asp:WizardStep>
          <asp:WizardStep ID="WizardStep2" runat="server" Title="Step 2"></asp:WizardStep>
     </WizardSteps>
</asp:Wizard>
Como é enviado ao Cliente : <table cellspacing="0" cellpadding="0" id="Wizard1" style="border-collapse:collapse;">
    <tr>
        <td style="height:100%;">
            <a href="#Wizard1_SkipLink" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;">Pular Links de Navegação.</a>
            <table id="Wizard1_SideBarContainer_SideBarList" cellspacing="0" style="border-collapse:collapse;">
                <tr>
                    <td style="font-weight:bold;">
                        <a id="Wizard1_SideBarContainer_SideBarList_SideBarButton_0" href="javascript:__doPostBack('Wizard1$SideBarContainer$SideBarList$ctl00$SideBarButton','')">Step 1</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a id="Wizard1_SideBarContainer_SideBarList_SideBarButton_1" href="javascript:__doPostBack('Wizard1$SideBarContainer$SideBarList$ctl01$SideBarButton','')">Step 2</a>
                    </td>
                </tr>
            </table>
            <a id="Wizard1_SkipLink"></a>
        </td>
        <td style="height:100%;">
            <table cellspacing="0" cellpadding="0" style="height:100%;width:100%;border-collapse:collapse;">
                <tr style="height:100%;">
                    <td></td>
                </tr>
                <tr>
                    <td align="right">
                        <table cellspacing="5" cellpadding="5">
                            <tr>
                                <td align="right">
                                    <input type="submit" name="Wizard1$StartNavigationTemplateContainerID$StartNextButton" value="Próxima" id="Wizard1_StartNavigationTemplateContainerID_StartNextButton" />
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
Incluir Item : Não
Utilidade do controle : Fornece a navegação necessária e uma interface ao usuário visando coletar dados em várias etapas. Parecido com o Multiview.
Controle : Xml
Código : <asp:Xml id="xml1" runat="server" />
Como é enviado ao Cliente : Table, Grid - Depende do que for definido no arquivo .xsl.
Incluir Item : Sim
Utilidade do controle : A finalidade deste controle é exibir os dados de um arquivo .xml baseando-se num arquivo de formato .xsl. Se o arquivo .xsl definir que o formato é uma table o objeto será exibido dentro de uma table, se for um grid, dentro de um grid e assim por diante. O arquivo .xsl define a saída, como os dados serão exibidos.

Muitos dos itens acima são coleções. A coluna Incluir Item=SIM indica que é necessário incluir pelo menos um item na coleção para que o controle seja enviado ao cliente. Se nenhum elemento for inserido, ou seja, o componente simplesmeste arrastado da caixa de ferramentas para a página, ele não será enviado ao cliente.

Os testes acima foram feitos num computador rodando o browser Google Chrome Versão 88.0.4324.182 (Versão oficial) 64 bits. Pode ser que em outros browsers ou mesmo em diferentes versão do browser / Visual Studio o ASP NET utilize outro controle mais compatível com o ambiente de exibição.

Não é demais frisar que a exibição da maioria dos controles ASP NET depende de processamento no servidor web ASP NET. Um simples clique leva o processo de volta ao servidor. No começo do ASP NET todos perguntavam : como um servidor pode suportar processar o clique de centenas ou milhares de usuários ? A resposta foi que o processamento requerido é extremamente baixo e simples para o servidor e, se for mantida nesta premissa, o Servidor Web ASP NET funciona muito bem.

Um grande número de controles ASP NET ao ser clicado gera um postback na página e para que isto ocorra o ASP NET inclui o seguinte código :
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>

Como disse anteriormente acima, esses controles ao serem enviados para o cliente são enviados como html convencional adicionando scripts, CSS e o que for necessário para fazer o que precisam fazer.
Note que controles complexos, como o Calendário, possuem uma integração nativa feita automaticamente pelo ambiente de desenvolvimento que envia tudo que o controle precisa para funcionar de maneira automatica sem que o programador precise escrever uma linha de código.

A sintaxe para usar os controles do servidor é:
    <asp: controlType ID="ControlID" runat="server" Propriedade1=valor1 [Propriedade2=valor2] />

Além disso, o visual studio possui os seguintes recursos, para ajudar a produzir codificação sem erros:
   •  Arrastar e soltar controles no modo de design
   • Recurso IntelliSense que exibe e preenche automaticamente as propriedades
   • A janela de propriedades para definir os valores da propriedade diretamente.